import { useState, useEffect } from "react";
import { View, Text, Button, Image } from "@tarojs/components";
import Taro from "@tarojs/taro";
import { requestUserInfo } from "@/utils/api";
import user_ava from "@/assets/user_ava.png";
import gm from "@/assets/gm.png";
import dd from "@/assets/dd.png";
import dz from "@/assets/dz.png";
import kf from "@/assets/kf.png";
import kq from "@/assets/kq.png";
import q from "@/assets/q.png";
import xx from "@/assets/xx.png";

import "./index.scss";

const User = (props) => {
  console.log(props);
  const [flag, setflag] = useState(false);
  const [UserInfo, setUserInfo] = useState(null);
  useEffect(() => {
    if (UserInfo) {
      requestUserInfo(UserInfo);
    }
    return () => {};
  }, [UserInfo]);
  useEffect(() => {
    console.log(flag);
    if (flag) {
      Taro.getUserProfile({
        desc: "用于完善会员资料", // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
        success: (res) => {
          console.log("个人信息", res);
          setUserInfo(res.userInfo);
        },
        fail: (err) => {
          console.log(err);
        },
      });
    }
    return () => {};
  }, [flag]);
  const getUserInfo = () => {
    setflag(true);
  };
  const handleaddr = () => {
    Taro.navigateTo({
      url: "../shipping/shipping",
    });
  };
  return (
    <View className="user">
      <View className="avatar" onClick={getUserInfo}>
        <Image className="img" src={UserInfo ? UserInfo.avatarUrl : user_ava} />
        <Text>{UserInfo ? UserInfo.nickName : "登录/注册"}</Text>
      </View>
      <View className="pay">
        <View className="pay_top">
          <View className="top_left">
            <Image src={gm} />
            <Text>购买</Text>
          </View>
          <View className="qb">
            <Text>全部订单 > </Text>
          </View>
        </View>
        <View className="top_nav">
          <View className="nav_item">
            <Image src={dz} />
            <Text>待付款</Text>
          </View>
          <View className="nav_item">
            <Image src={kf} />
            <Text>待发货</Text>
          </View>
          <View className="nav_item">
            <Image src={kq} />
            <Text>待收货</Text>
          </View>
        </View>
      </View>
      <View className="list">
        <View className="list_left">
          <Image src={q} />
          <Text>账户</Text>
        </View>
        <Text>></Text>
      </View>
      <View className="list">
        <View className="list_left">
          <Image src={kq} />
          <Text>卡券</Text>
        </View>
        <Text>></Text>
      </View>
      <View className="list">
        <View className="list_left">
          <Image src={dd} />
          <Text>订单</Text>
        </View>
        <Text>></Text>
      </View>
      <View className="list" onClick={handleaddr}>
        <View className="list_left">
          <Image src={dz} />
          <Text>地址管理</Text>
        </View>
        <Text>></Text>
      </View>
      <View className="list">
        <View className="list_left">
          <Image src={xx} />
          <Text>消息管理</Text>
        </View>
        <Text>></Text>
      </View>
      <View className="list">
        <View className="list_left">
          <Image src={kf} />
          <Text>客服通知</Text>
        </View>
        <Text>></Text>
      </View>
      {UserInfo ? (
        <View className="tuichu" onClick={() => setUserInfo(null)}>
          退出登录
        </View>
      ) : (
        ""
      )}
    </View>
  );
};

export default User;
